<template>
    <div>
        <v-dialog
                v-model="renameCategoryDialog"
                overlay-opacity="0.2"
                width="400px"
        >
            <v-card outlined>
                <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
                <v-card-title class="subtitle-1" style="border-bottom: 1px solid #d0dfe7">重命名</v-card-title>
                <v-card-text class="mt-8">
                    <v-text-field
                            ref="categoryName"
                            outlined
                            label="新分类名"
                            v-model="newCategoryName"
                            class="mt-3"
                            dense
                            clearable
                            autofocus
                            :rules="[categoryNameRule]"
                            @keypress.enter="rename()"
                    >
                    </v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn class="ml-10" width="130" color="primary" @click="rename()">重命名</v-btn>
                    <v-btn class="ml-10" width="130" color="warning" @click="cancel()">取消</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import {categoryNameRule} from "../../../../util/rule";
    import MyLoadingOverlay from "../../common/MyLoadingOverlay";
    export default {
        name: "MyRenameCategoryDialog",
        components: {MyLoadingOverlay},
        props: {
            renameCategoryDialog: {
                type: Boolean,
                default: false
            },
            category: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                loadingOverlay: false,
                newCategoryName: ''
            }
        },
        methods: {
            categoryNameRule,
            cancel() {
                this.$refs["categoryName"].reset();
                this.$emit('reset-rename')
            },
            rename() {
                let _this = this;
                if (!_this.$refs["categoryName"].validate()) {
                    return;
                }
                _this.loadingOverlay = true;
                if (_this.category.name === _this.newCategoryName) {
                    _this.cancel();
                }
                _this._put({
                    url: 'system/collection/rename-category',
                    data: {
                        id: _this.category.id,
                        name: _this.newCategoryName
                    }
                }).then(rsp => {
                    _this.$refs["categoryName"].reset();
                    _this.$emit('rename-success')
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        }
    }
</script>

<style scoped>

</style>